<template>
  <div>
    <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/tag/list">标签管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>标签列表</el-breadcrumb-item>
    </el-breadcrumb>

    <h3 style="margin: 20px 0 0 0;">标签列表</h3><br>

    <!--按钮：创建用户-->
    <el-button type="primary" round @click="cardPopup(-1)">创建</el-button>
    <!--按钮：批量删除-->
    <el-button type="danger" round style="float: right" @click="handleDeleteList()">批量删除</el-button>
    <!--用户列表-->
    <template>
      <el-table
          :data="tableData"
          ref="multipleTable"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="40">
        </el-table-column>
        <el-table-column fixed prop="id" label="ID" width="70"></el-table-column>
        <el-table-column fixed prop="name" label="标签名" width="200"></el-table-column>
        <el-table-column fixed prop="articleCount" label="标签文章数" width="150"></el-table-column>
        <el-table-column fixed prop="sort" label="排序值" width="150"></el-table-column>
        <el-table-column fixed prop="gmtCreate" label="创建时间" width="175"></el-table-column>
        <el-table-column fixed prop="gmtModified" label="最后修改时间" width="175"></el-table-column>
        <el-table-column fixed prop="status" label="标签状态" width="100">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.status==1?'已启用':'已禁用'">
              <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inacti
                  :active-value="1"
                  :inactive-value="0"
                  @change="handleEdit(scope.row)">
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="400">
          <template slot-scope="scope" style="float: left">
            <el-tooltip class="item" effect="dark" content="修改用户" placement="top">
              <el-button type="primary" icon="el-icon-edit" circle
                         @click="cardPopup(scope.row.id)"></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="删除用户" placement="top">
              <el-button type="danger" icon="el-icon-delete" circle
                         @click="handleDelete(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>


    <!--弹窗：添加/修改-->
    <template>
      <div>
        <el-dialog
            :title = dialogVisibleTitle
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="40%"
            @close="closeDialog('ruleForm')">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
            <el-form-item label="标签名" :prop="name">
              <el-input v-model="ruleForm.name" minlength="1" maxlength="15" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="排序值" :prop="sort">
              <el-input v-model="ruleForm.sort" minlength="1" maxlength="15" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="是否启用" :prop="status">
              <el-tooltip :content="ruleForm.status=='1'?'启用':'禁用'" placement="top">
                <el-switch
                    v-model="ruleForm.status"
                    active-color="#13ce66"
                    inactive-color="#E4E7ED"
                    :active-value="1"
                    :inactive-value="0"
                ></el-switch>
              </el-tooltip>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="insert(ruleForm.id)">提交</el-button>
              <el-button @click="closeDialog('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </template>


    <!--页码-->
    <template>
      <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 7, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="countDate">
        </el-pagination>
      </div>
    </template>
  </div>
</template>
$("input[serch=true]").on("propertychange input change", function() {
seach();
});
<script>
export default {
  data() {
    return {
      ruleForm: {
        id:"",
        name: '',
        articleCount:'',
        sort: 0,
        gmtModified: '',
        status: 1,
      },       // 添加 / 修改数据集
      rules: {
        name: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ]
      },                // 输入验证
      input: {
        username: '',
        nick: '',
        phone: '',
        status: 1,
        offset: '',
        count: ''
      },    // 查询条件集

      tableData: [],               // 条件查询结果集
      multipleSelection: [],       // 批量删除复选框
      props: {multiple: true,value: 'id', label: 'name'},   // 自定义 props 实现单选
      options: [],                // 角色列表回显
      optionsSelectEcho:[],       // 用户角色回显

      genderClick: true,               // 性别
      AddOrSetByUserId:0,              // 区别方法【添加 ro 修改】
      usernameStatus: '正常使用',       // 用户状态筛选---【首页筛选用户状态按钮】
      dialogVisibleTitle: '添加标签',   // 弹框标题---【添加 or 修改功能】
      dialogVisible: false,           // 弹出框状态【添加 or 修改功能】，默认隐藏

      currentPage: 1,   // 当前页码
      currentSize: 5,   // 每页展示信息数量
      countDate: 0,     // 条件查询结果集数量
    }
  },
  methods: {

    /**
     * 弹窗：添加业务 OR 修改业务
     */
    cardPopup(id) {
      if (id === -1) {
        this.ruleForm.status = 1;           // 默认状态为启用
        this.ruleForm.id = id;         // 调用添加方法
        this.dialogVisibleTitle = "添加标签"; // 设置弹窗标题
      } else {
        this.dialogVisibleTitle = "修改标签"; // 设置弹窗标题
        this.AddOrSetByUserId = id;     // 调用修改方法
        /**
         * 异步请求，获取当前用户拥有的角色
         */
        this.axios.get("http://localhost:9090/tags/getById?id="+id).then((response)=>{
          console.log("用户角色回显成功...")
          this.ruleForm = response.data.data;
          console.log(this.ruleForm)
        })
      }
      this.dialogVisible = true;   // 打开弹窗

    },

    /**
     * 修改/修改标签
     * @param id
     */
    insert(id){
      if (id === -1){
        let path = "http://localhost:9090/tags/add-new";
        this.axios.post(path, this.ruleForm).then((response) => {
          switch (response.data.code) {
            case 200:
              this.$message({
                type: 'success',
                message: "创建成功"
              });
              this.listUsersByCondition()
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              })
              break;
          }
        })
        location.reload();
      }else {
        let path = "http://localhost:9090/tags/update-by-id";
        this.axios.post(path, this.ruleForm).then((response) => {
          switch (response.data.code) {
            case 200:
              this.$message({
                type: 'success',
                message: "创建成功"
              });
              this.listUsersByCondition()
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              })
              break;
          }
        })
        location.reload();
      }
    },

    /**
     * 业务：删除
     * row
     */
    handleDelete(row) {
      let array = [];
      array.push(row.id);
      this.$confirm('此操作将永久删除【' + row.name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("http://localhost:9090/tags/delete-by-ids", array).then((response) => {
          switch (response.data.code) {
            case 200:
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              location.reload()
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              });
              break;
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    /**
     * 业务：批量删除
     */
    handleDeleteList() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          type: 'info',
          message: '请勾选需要删除的品牌'
        });
        return;
      }
      let array = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        array.push(this.multipleSelection[i].id);
      }

      this.$confirm('此操作将永久删除ID为【'+array+'】的标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("http://localhost:9090/tags/delete-by-ids", array).then((response) => {
          switch (response.data.code) {
            case 200:
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.listUsersByCondition()
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              })
              break;
          }
        })
      }).catch(() => {
        this.$refs.multipleTable.clearSelection();
        this.$message({
          type: 'info',
          message: '已取消批量删除'
        });
      });
    },


    /**
     * 业务：获取批量删除业务选中的复选框
     * @param val
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },


    /**
     * 业务：修改标签状态
     * @param id
     */
    handleEdit(row) {
      this.$confirm('此操作将使【'+row.name+'】的账号无法正常使用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let path = "http://localhost:9090/tags/update-by-id"
        let data = {
          id: row.id,
          status: row.status
        }
        /**
         * 修改根据用户id修改用户状态
         */
        this.axios.post(path, data).then((response) => {
          switch (response.data.code) {
            case 200:
              this.$message({
                type: 'success',
                message: "修改成功"
              })
              this.listUsersByCondition();
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              })
              if (row.status === 0) {
                row.status = 1;
              } else {
                row.status = 0;
              }
              break;
          }
        })
        location.reload();
      }).catch(() => {
        if (row.status === 0) {
          row.status = 1;
        } else {
          row.status = 0;
        }
      })
    },


    /**
     * 业务：根据条件查询用户列表
     */
    listUsersByCondition() {
      this.input.offset = (this.currentPage - 1) * this.currentSize;
      this.input.count = this.currentSize;

      /**
       * 查询满足查询条件的信息数量
       */
      this.axios.get("http://localhost:9090/tags/count").then((response) => {
        this.countDate = response.data.data;
        console.log(response.data);
      })

      /**
       * 查询满足查询条件的用户列表
       */
      this.axios.get("http://localhost:9090/tags?offset="+this.input.offset+"&count="+this.input.count).then((response) => {
        this.tableData = response.data.data;
        console.log(response.data)
      })
    },


    /**
     * 业务：页面按钮，根据选择项控制提交用户状态的条件
     */
    queryStatus(id) {
      switch (id) {
        case 1:
          this.usernameStatus = '正常使用';
          this.input.status = 1;
          break;
        case 2:
          this.usernameStatus = '禁用状态';
          this.input.status = 0;
          break;
        case 3:
          this.usernameStatus = '全部状态';
          this.input.status = null;
          break;
      }
      this.listUsersByCondition();
    },


    /**
     * 业务：获取分页，每页条数
     * @param val
     */
    handleSizeChange(val) {
      console.log(`当前每页 ${val} 条`);
      this.currentSize = val;
      this.listUsersByCondition();
    },


    /**
     * 业务：获取当前页数
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.listUsersByCondition();
    },


    /**
     * 清除弹窗数据及遗留效果
     */
    closeDialog(ruleForm) {
      this.ruleForm = {}
      if (this.$refs[ruleForm] !== undefined) {
        this.$refs[ruleForm].resetFields();
      }
    },
  },
  created() {
    this.listUsersByCondition();
  }
}
</script>

